<template>
  <div>
    <!-- TODO 磁盘概览 组件 watch -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row style="height: 300px;width: 100%;">
          <div v-for="(disk, index) in deskData" :key="index" style="margin-top: 10px;">
            <el-row class="fontbox">
              <el-col :span="9" class="fontS1">{{ disk.fileSystem }}</el-col>
              <el-col :span="5" class="fontS2">分区大小：{{ disk.size }}</el-col>
              <el-col :span="5" class="fontS3">已使用：{{ disk.used }}</el-col>
              <el-col :span="5" class="fontS4">可用：{{ disk.avail }}</el-col>
            </el-row>
            <el-row style="margin-top: 10px;">
              <el-progress :text-inside="true" :stroke-width="26" :percentage="disk.usePer" :color="disk.color" />
            </el-row>
          </div>
        </el-row>
      </div>
    </el-card>
    <!-- TODO进程-->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row style="height: 600px;width: 100%;">
          <el-table :data="progressList" style="width: 99%" stripe>
            <el-table-column label="序号" width="80" type="index" align="center" />
            <el-table-column label="进程ID" width="100" align="center" prop="appPid" />
            <el-table-column label="主机名" width="180" align="center">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <p>主机名: {{ scope.row.hostName }}</p>
                  <p>进程ID: {{ scope.row.appPid }}</p>
                  <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.hostName }}</el-tag>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column label="进程名称" width="280" prop="appName" />
            <el-table-column label="进程状态" width="180" align="center">
              <template slot-scope="scope">
                <el-row v-if="scope.row.state == '1'"><el-tag type="success">正常</el-tag></el-row>
                <el-row v-if="scope.row.state == '2'"><el-tag type="info">下线</el-tag></el-row>
              </template>
            </el-table-column>

            <el-table-column label="内存使用率" width="150">
              <template slot-scope="scope">
                {{ scope.row.memPer }}%
              </template>
            </el-table-column>

            <el-table-column label="Cpu使用率" width="150">
              <template slot-scope="scope">
                {{ scope.row.cpuPer }}%
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </div>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row style="height: 300px;width: 100%;">
          <cupChart :ip="ip" />
        </el-row>
      </div>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row style="height: 300px;width: 100%;">
          <memChart :ip="ip" />
        </el-row>
      </div>
    </el-card>
    <!-- <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row style="height: 300px;width: 100%;">
          <txpck :ip="ip" />
        </el-row>
      </div>
    </el-card> -->
  </div>
</template>

<script>
import cupChart from '../cupChart/index.vue'
import memChart from '../memChart/index.vue'
import { getDesk } from '@/api/chart'
import { getProgres } from '@/api/progress.js'

export default {
  components: { cupChart, memChart },
  props: ['ip'],
  data() {
    return {
      config1: {
        data: [
          { name: '进程', value: 150 },
          { name: '端口', value: 120 },
          { name: '接口', value: 150 },
          { name: '数据库', value: 80 },
          { name: '报警', value: 100 }

        ],
        colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
        unit: '个',
        showValue: true
      },
      deskData: [],
      colorList: ['#8F50E0', '#4994E9', '#7BD8A0', '#FFBE7B'],
      progressList: []
    }
  },
  mounted() {
    setInterval(this.getDesk, 2000)
    setInterval(this.getProgres, 2000)
    this.getDesk()
    this.getProgres()
  },
  methods: {
    // 磁盘
    async getDesk() {
      const res = await getDesk()
      for (let i = 0; i < res.length; i++) {
        console.log(res[i][0].hostname)
        if (res[i][0].hostname == this.ip) {
          console.log('for', res[i][0])
          // this.deskData = res[i]
          this.deskData = res[i].map((item, index) => {
            return {
              ...item,
              usePer: parseInt(item.usePer), // 转换usePer为整数
              color: this.colorList[index % this.colorList.length]
            }
          })
        }
      }
      console.log('deskData', this.deskData)
    },
    // 进程
    async getProgres() {
      const reqData = { hostName: this.ip }
      const res = await getProgres(1, 10, reqData)
      this.progressList = res.records
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  height: 100%;

}

.value {
  color: #2A82E4;
  font-size: 28px;
  font-weight: bold;
}

.border-box-content .dv-capsule-chart .label-column {
  color: #000;
}
</style>
